<template>
<div class="main-box">
    <div class="container">
        <div class="ad-banner">
            <ul></ul>
        </div>
    </div>
    <div class="container">
        <div class="index-menu">
        <ul class="menu-wrap">
            <li class="menu-item">
                <a href="javascript:;">景点</a>
                <div class="children">

                </div>
            </li>
            <li class="menu-item">
                <a href="javascript:;">美食</a>
            </li>
            <li class="menu-item">
                <a href="javascript:;">KTV</a>
            </li>
            <li class="menu-item">
                <a href="javascript:;">租车</a>
            </li>
            <li class="menu-item">
                <a href="javascript:;">户外运动</a>
            </li>
            <li class="menu-item">
                <a href="javascript:;">城市</a>
            </li>
        </ul>
    </div>
    </div>
    <div class="main-swiper">
        <swiper :options="swiperOption" >
            <swiper-slide v-for="(item, index) in indexSwipeImages" v-bind:key="index">
                <a v-bind:href="'#'">
                    <img class="swiper-image" v-bind:src="item.image_url" />
                </a>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
    <div class="container">
        <div class="recommend-tourist">
            <div class="recommend-tourist-tab recommend-tab">
                <h3 class="clearfix">
                    <em class="more right"><router-link to="tourist">更多<b>&gt;&gt;</b></router-link></em>
                    <a class="pr20 left" href="http://www.mk117.com/tourist"><i class="wan_icon icon_tourist left pr5"></i>景点</a>
                    <span v-for="(item, index) in recommendTouristOption" :key="index" :sign="index" v-on:click="handleTabTouristTitleClick('tourist-' + index)" v-bind:class="{'current':recommendTouristTitleCurrent === 'tourist-' + index}">
                        {{item.cn_name}}
                    </span>
                </h3>
            </div>
            <div class="recommend-tourist-content recommend-content">
                <ul class="tab-content-theme" v-for="(item, index) in recommendTouristData" :key="index" :sign="index" :class="{'current':recommendTouristTitleCurrent === 'tourist-' + index, 'recommend-tourist-content-box':true}">
                    <li  v-for="(_item, _index) in item" :key="_index" :sign="_item.sign">
                        <a href="javascript:void(0)" @click="handleTouristClick(item.target_id)" target="_self">
                            <div class="pic_add"><img alt="景点" :src="_item.image_url" data-original-background="none" style="background: none;width: 100%;"></div>
                            <div class="city_name">{{_item.city_name}}</div>
                        </a>
                        <div class="scale_tour">
                            <p>{{_item.element_name}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <br/>
        <div class="recommend-tourist">
            <div class="recommend-tourist-tab recommend-tab">
                <h3 class="clearfix">
                    <em class="more right"><router-link to="food">更多<b>&gt;&gt;</b></router-link></em>
                    <a class="pr20 left" href="http://www.mk117.com/tourist"><i class="wan_icon icon_tourist left pr5"></i>美食</a>
                    <span v-for="(item, index) in recommendFoodOption" :key="index" :sign="index" v-on:click="handleTabFoodTitleClick('food-' + index)" v-bind:class="{'current':recommendFoodTitleCurrent === 'food-' + index}">
                        {{item.cn_name}}
                    </span>
                </h3>
            </div>
            <div class="recommend-tourist-content recommend-content">
                <ul class="tab-content-theme" v-for="(item, index) in recommendFoodData" :key="index" :sign="index" :class="{'current':recommendFoodTitleCurrent === 'food-' + index, 'recommend-tourist-content-box':true}">
                    <li  v-for="(_item, _index) in item" :key="_index" :sign="_item.sign">
                        <a href="javascript:void(0)"  @click="handleFoodClick(item.target_id)" target="_self">
                            <div class="pic_add"><img alt="景点" :src="_item.image_url" data-original-background="none" style="background: none;width: 100%;"></div>
                            <div class="city_name">{{_item.city_name}}</div>
                        </a>
                        <div class="scale_tour">
                            <p>{{_item.element_name}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>

</template>

<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'

    import http from "../util/http";
    import router from "../router";
    export default {
        name: "index",
        components: {
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                recommendTouristData : [],
                recommendTouristOption : [],

                recommendFoodData : [],
                recommendFoodOption : [],

                recommendFunData : [],
                recommendFunOption : [],

                recommendTouristTitleCurrent:'tourist-hot',
                recommendFoodTitleCurrent:'food-hot',
                recommendFunTitleCurrent:'fun-hot',

                swiperOption :{
                    autoplay:true,
                    pagination: {
                        el: '.swiper-pagination'
                    },
                },
                indexSwipeImages: [
                    {
                        title: '',
                        city: '',
                        desc: '',
                        image: '/images/swiper/01.png',
                    },
                    {
                        title: '',
                        city: '',
                        desc: '',
                        image: '/images/swiper/02.png',
                    },
                    {
                        title: '',
                        city: '',
                        desc: '',
                        image: '/images/swiper/03.png',
                    },
                ]
            }
        },
        mounted() {
            http.get("index/config").then(res => {
                if (res.success === true) {
                    this.indexSwipeImages = res.data.index_swipe_data;

                    this.recommendTouristData = res.data.index_hot_tourist.data;
                    this.recommendTouristOption = res.data.index_hot_tourist.option;

                    this.recommendFoodData = res.data.index_hot_food.data;
                    this.recommendFoodOption = res.data.index_hot_food.option;
                }
            });
        },
        methods:{
            handleTabTouristTitleClick: function (sign) {
                this.recommendTouristTitleCurrent = sign;
            },

            handleTabFoodTitleClick: function (sign) {
                this.recommendFoodTitleCurrent = sign;
            },

            handleTabFunTitleClick: function (sign) {
                this.recommendFunTitleCurrent = sign;
            },

            handleTouristClick: function (id) {
                router.push('/tourist/detail/' + id);
                return
            },

            handleFoodClick: function (id) {
                router.push('/food/detail/' + id);
                return
            },
        }

    }
</script>

<style lang="scss">
    @import './../assets/scss/config.scss';
    @import './../assets/scss/reset.scss';
    @import './../assets/scss/mixin.scss';
    .wan_icon {
        background: url('/images/icon-index.png') no-repeat 0 0;
        overflow: hidden;
    }
    .icon_tourist {
        background-position: -576px -131px;
        width: 24px;
        height: 24px;
    }
    .main-box {
        width: 100%;
        min-width: 1200px;
        .container {
            min-width: 1200px;
            width: 1200px;
            margin: 0 auto;
            position: relative;
            .recommend-title {
                i {
                    position: absolute;
                    left: 50%;
                    margin-left: -6px;
                    bottom: 3px;
                    display: none;
                    width: 0;
                    height: 0;
                    overflow: hidden;
                    line-height: 0;
                    font-size: 0;
                    vertical-align: middle;
                    border-bottom: 6px solid #3983e5;
                    border-top: 0 none;
                    border-left: 6px solid transparent;
                    border-right: 6px solid transparent;
                }
                .current {
                    display: inline-block;
                }
            }
            .recommend-tab {
                h3 {
                    padding: 10px 0;
                    .more {
                        position: relative;
                        top: 6px;
                        a {
                            color: #555;
                            font: 14px/24px Microsoft yahei;
                            b {
                                font-family: Simsun;
                                font-weight: normal
                            }
                        }
                    }
                    a {
                        font: 18px/26px Microsoft yahei;
                        color: #555;
                    }
                    .current {
                        background: #F66;
                        color: #fff;
                    }
                    span {
                        font: 14px/22px Microsoft yahei;
                        color: #555;
                        padding: 1px 10px;
                        margin: 1px 13px 0;
                        border-radius: 6px;
                        cursor: pointer;
                        float: left;
                    }
                }
            }
            .recommend-tourist {
                .recommend-tourist-title {
                    position: relative;
                    z-index: 12;
                    height: 36px;
                    border-bottom: 2px solid #3983e5;
                    text-align: left;
                    span {
                        font: 16px/26px "Microsoft YaHei", "SimHei", SimSun, Tahoma, Verdana, Arial, sans-serif;
                        position: relative;
                        bottom: -3px;
                        float: left;
                        height: 36px;
                        line-height: 30px;
                        color: #333;
                        margin-right: 30px;
                        cursor: pointer;
                        &:hover {
                            color: #06c;
                            cursor: default;
                        }
                    }
                }
                .recommend-tourist-content {
                    overflow: hidden;
                    background: #fff;
                    border-top: none;
                    .recommend-tourist-content-box {
                        display: none;
                    }
                    .current {
                        display: inline-block;
                    }
                }
            }

        }
        .recommend-content {
            .tab-content-theme {
                overflow: hidden;
                width: 1220px;
                height: 202px;
                li {
                    float: left;
                    width: 293px;
                    margin: 0 10px 0 0;
                    overflow: hidden;
                    position: relative;
                    &:hover {
                        .scale_tour {
                            border-bottom: 2px solid #F66;
                            margin-bottom: 0
                        }
                        a .pic_add img {
                            bottom: 8px;
                            -webkit-transiton: bottom .3s;
                            transition: bottom .3s
                        }
                    }
                    a {
                        display: block;
                        width: 100%;
                    }
                    img {
                        display: block;
                        width: 100%;
                        margin-top: -20px;
                        position: relative;
                        bottom: 0;
                        transition: bottom .3s;
                    }
                    .pic_add {
                        height: 160px;
                        width: 100%;
                        overflow: hidden;
                    }
                    .city_name {
                        position: absolute;
                        font: 24px/30px Microsoft yahei;
                        color: #fff;
                        top: 124px;
                        left: 0;
                        text-indent: .5em;
                        text-shadow: 1px 1px 7px #000;
                    }
                    .mask_num {
                        background: rgba(0,0,0,.5) !important;
                        background: #000;
                        filter: alpha(opacity=50);
                        width: 100px;
                        height: 100px;
                        position: absolute;
                        left: 50%;
                        top: 40px;
                        margin: 0 0 0 -40px;
                        color: #fff;
                        border-radius: 50px;
                        text-align: center;
                        font: 18px/24px Microsoft yahei;
                        color: #fce639;
                        display: none;
                        cursor: pointer;
                    }
                    .scale_tour {
                        padding: 5px;
                        background: #f7f7f7;
                        border-bottom: 1px solid #ccc;
                        margin-bottom: 1px;
                        p {
                            color: #555;
                            font: 14px/30px Microsoft yahei;
                        }
                    }
                }
            }
        }
        .index-menu {
            position:absolute;
            width:200px;
            z-index:9;
            margin:26px 0;
            box-sizing:border-box;
            .menu-wrap {
                .menu-item {
                    height:40px;
                    line-height:40px;
                    a{
                        background-color:#2577e3;
                        position:relative;
                        display:block;
                        font-size:16px;
                        color:#fff;

                        padding-left:30px;
                        &:after{
                            position:absolute;
                            right:30px;
                            top:17.5px;
                            content:' ';
                            @include bgImg(10px,15px,'/images/icon-arrow.png');
                        }
                        &:hover {
                            background-color:#ffffff;
                            color:#2577e3;
                            border-left: #FF6600 solid 2px;
                        }
                    }

                    &:hover {
                        .children{
                            display:block;
                        }
                    }

                    .children{
                        display:none;
                        width:550px;
                        height: 100%;
                        background-color:$colorG;
                        position:absolute;
                        top:0;
                        left:200px;
                        border:1px solid $colorH;
                        ul{
                            display:flex;
                            justify-content:space-between;
                            height:75px;
                            li{
                                height:75px;
                                line-height:75px;
                                flex:1;
                                padding-left:23px;
                            }
                            a{
                                color:$colorB;
                                font-size:14px;
                            }
                            img{
                                width:42px;
                                height:35px;
                                vertical-align:middle;
                                margin-right:15px;
                            }
                        }
                    }
                }
            }
        }
        .main-swiper {
            .swiper-image {
                height:340px;
                width: 100%;
            }
        }
    }
</style>
